import React, { Component } from 'react'
import store from '../../redux/store'

export default class Const extends Component {
    state = {
        count:0
    }

    increment =() =>{
        const {value} = this.selectNumber
        store.dispatch({type:'increment',data:value})
    }
    decrement =() =>{
        const {value} = this.selectNumber
        store.dispatch({type:'decrement',data:value})
    }
    incrementIfOdd =() =>{
        const {value} = this.selectNumber
        if (store.getState()%2 === 1){
            store.dispatch({type:'incrementIfOdd',data:value})
        }
    }
    incrementAsync =() =>{
        const {value} = this.selectNumber
        setTimeout(() => {
            store.dispatch({type:'incrementAsync',data:value})
        }, 200);
    }
    componentDidMount(){
        store.subscribe(()=>{
            this.setState({})
        })
    }
    render() {
        return (
            <div>
                <h1>结果为:{store.getState()}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>奇数再+</button>&nbsp;
                <button onClick={this.incrementAsync}>异步再+</button>&nbsp;
            </div>
        )
    }
}
